/**
 * 模型中心列表
 */
import React, { Component, createContext, version } from 'react'
import { LeftCircleOutlined, QuestionCircleOutlined, RightCircleOutlined } from '@ant-design/icons';
import {
  Table,
  Button,
  Popconfirm,
  Modal,
  Input,
  Badge,
  notification,
  Spin,
  Popover,
  message,
  Tag,
} from 'antd';
import NoData from '@/components/NoData';
import { NavLink, Switch } from 'react-router-dom';
import { getModelList, getVersionList, deleteModel, editVersion, deleteVersion, getMarkedDatasetList, getBuildInDatasetList, deleteMarkedDataSet, getMarkedVersionDataSetList } from '@/services/modelCenter';
import View from './components/viewModel'
import AddVerson from './components/addVerson'
import AddModel from './components/addModel'
import SelectDataSet from './components/selectDataSet'
import InsertDataSet from './components/insertDataSet'
import WebSocket from '@/utils/webSocket'
import { getDataPurpose } from '@/services/dataCenter';
import { red } from "@ant-design/colors/lib";
import Text from "antd/es/typography/Text";

const { Search } = Input;
const { confirm } = Modal;
const contents = (
  <div>
    <p><strong>模型性能：</strong>能衡量模型优劣的性能指标，通常有精确率、召回率、F1值。</p>
    <h4>精确率（Precision）：</h4>
    <p>精确率(Precision)，查准率，表示正确预测为正的占全部预测为正的比例。</p>
    <h4>召回率（Recall）：</h4>
    <p>召回率(Recall)，查全率，表示正确预测为正的占全部实际为正的比例。</p>
    <h4>F1值：</h4>
    <p>F1值为精确率和召回率的调和平均数，值越大越好。 此处为整体F1值。</p>
    <h4>hit@10：</h4>
    <p>排好序的n-1元素中，我们从第一个开始遍历，看从第一个到第十个是否能够遇到真实的实体，</p>
    <p>如果遇到了就将hit@10 +1，这就是hit@10的意义，表示我们的算法能够正确表示三元组关系</p>
    <p>的能力（在hit@10里 不要求第一个才是对的，能做到前十的能力就可以了）。</p>
  </div>
)
const bondStyle = {
  fontWeight: 700,
  marginTop: 5
}

class ModelCenter extends Component {
  constructor(argus) {
    super(argus);

    this.state = {
      modelList: [],
      versionList: {},
      isShowAddDataModel: false,
      isShowViewModel: false,
      isShowAddVersonModel: false,
      isShowFilesModel: false,
      modelId: '', // 模型id
      type: 0, // 模型类型
      algorithmId: '', // 算法 id
      versionId: '', // 版本id
      pageNum: 1,
      pageSize: 10,
      total: 0,
      keyword: '', // 搜索
      isLoading: true, // 列表加载
      modelTypeList: [],
      expandedRowKey: argus.location.query.key,
      files: [],
      // 当前查看modelType
      modelType: null,
      // 添加弹框显示
      addDataSetVisible: false,
      // 已包含标注数据集数量
      selected: 0,
      // 查看标注数据集是否是版本
      isVersion: false,
      // 数据集提交按钮loading
      loading: false,
      // 内置数据集显示
      insertDataSetVisible: false,
      // 标注数据集列表
      MarkedDatasetList: [],
      // 标注数据集名称
      dataSetName: '',
      anotherAlgorithmId: '',
      // 当前行内置数据集数量
      insertData: 0
    };
  }

  componentDidMount() {
    getDataPurpose({ commonType: 'model_purpose' }).then(rs => {
      const { modelTypeList } = this.state;
      if (rs.retCode === '0') {
        rs.data.forEach(modelType => {
          modelTypeList[modelType.commonValue - 0] =
            { name: modelType.commonName, color: modelType.commonAddition };
        });
        this.setState({ modelTypeList })
        this.queryModelList();
      }
    });
  }

  // 获取模型 列表
  queryModelList() {
    const { pageNum, pageSize, keyword, expandedRowKey } = this.state;
    getModelList({ pageNum: pageNum - 1, pageSize, data: { modelName: keyword } }).then(res => {
      if (res.retCode === '0') {
        this.setState({ modelList: res.data.list.filter(val => val.key = val.modelId), total: res.data.total, keyword, isLoading: false },
          () => { expandedRowKey && this.onExpand(true, expandedRowKey) })
      }
    })
  }

  // 获取模型下 版本列表
  onExpand(expanded, expandedRowKey) {
    expanded && expandedRowKey!=='undefined' && this.queryVersionList(expandedRowKey)
  }

  // 获取模型下的 版本列表
  queryVersionList(id) {
    Number(id) && getVersionList({ pageNum: 0, pageSize: 10000, data: { modelId:id } }).then(res => {
      if (res.retCode === '0') {
        this.setState({
          versionList: {
            ...this.state.versionList,
            [id]: res.data.list,
          },
        })
      }
    })
  }

  editVersionStatus(data) {
    editVersion(data).then(res => {
      if (res.retCode === '0') {
        notification.success({
          message: '操作成功',
          key: '操作成功',
          description: `模型${data.versionStatus == 0 ? '下线成功' : '开始发布'}`,
        });
        this.queryModelList();
      }
    })
    if (data.versionStatus == 1) {
      WebSocket('nlp_model_publish', (res, rws) => {
        if (res.message === 'nlp_model_publish success') {
          notification.success({
            message: '操作成功',
            key: '模型发布成功',
            description: '模型发布成功',
          });
        } else {
          notification.warning({
            message: '操作失败',
            key: '模型发布失败',
            description: '模型发布失败',
          });
        }
        this.queryModelList();
        rws.close();
      }, close => { }, error => { });
    }
  }

  // 新建模型
  addData(isShowAddDataModel, modelId) {
    this.setState({ isShowAddDataModel, modelId }, () => { !isShowAddDataModel && this.queryModelList(); })
  }

  // 搜索模型列表
  onSearch(keyword) {
    this.setState({ keyword, pageNum: 0 }, () => { this.queryModelList() });
  }

  // 版本列表 查看
  view(isShowViewModel, versionId,) {
    this.setState({ isShowViewModel, versionId, })
  }

  // 添加 verson
  addVerson(isShowAddVersonModel, modelId, algorithmId, anotherAlgorithmId, type) {
    this.setState({ isShowAddVersonModel, modelId, algorithmId, anotherAlgorithmId, type }, () => {
      if (!isShowAddVersonModel) {
        this.queryVersionList(modelId);
        WebSocket('nlp_model_train', (res, rws) => {
          this.queryVersionList(modelId);
          rws.close();
        }, close => {
        }, error => {
        });
      }
    })
  }

  // 删除模型
  delete(modelId) {
    const { pageNum, pageSize, total } = this.state;
    deleteModel(modelId).then(res => {
      if (res.retCode === '0') {
        notification.success({
          message: '操作成功',
          key: '操作成功',
          description: '模型删除成功',
        });
        if (pageNum > 0 && (pageNum - 1) * pageSize == total - 1) {
          this.setState({ pageNum: pageNum - 1 }, () => {
            this.queryModelList();
          });
        } else {
          this.queryModelList();
        }
      }
    })
  }

  // 删除版本
  onDeleteVersion(versionId, modelId) {
    deleteVersion(versionId).then(res => {
      if (res.retCode === '0') {
        notification.success({
          message: '操作成功',
          key: '操作成功',
          description: '模型版本删除成功',
        });
        this.queryVersionList(modelId)
      }
    })
  }

  // 发布 或者 下线
  onEditVersion(versionId, versionStatus, modelId) {
    this.setState({ expandedRowKey: modelId }, () => { this.editVersionStatus({ versionStatus, versionId, modelId }); })
  }

  // 查看标注数据集详情弹框
  onShowFilesModel(isShowFilesModel, modelId, versionId, isVersion, modelType) {
    this.setState({ isShowFilesModel, modelId, versionId, isVersion, modelType, MarkedDatasetList: [], selected: 0, dataSetName: '', },
      () => this.getMarkedDataset(modelId, versionId, isVersion));
    !isShowFilesModel && this.queryModelList();
  }

  // 查询标注数据集列表
  getMarkedDataset(modelId, versionId, isVersion, segmentNum) {
    const { dataSetName, selected } = this.state;
    (isVersion ? getMarkedVersionDataSetList({ data: { modelId, versionId, dataSetName }, pageNum: 0, pageSize: 0 }) :
      getMarkedDatasetList({ data: { modelId, dataSetName }, pageNum: 0, pageSize: 0 })).then(res => {
      if (res.retCode === '0') {
        if (!dataSetName) {
          let selectedNum = 0;
          res.data.list.map(val => selectedNum += Number(val.segmentNum));
          this.setState({ MarkedDatasetList: res.data.list, selected: selectedNum, })
        } else if (segmentNum) {
          let selectedCopy = selected;
          selectedCopy -= Number(segmentNum);
          this.setState({ MarkedDatasetList: res.data.list, selected: selectedCopy, })

        } else {
          this.setState({ MarkedDatasetList: res.data.list, })
        }
      }
    })
  }

  // 翻页
  onPageChange(pageNum) {
    const { pageSize, keyword } = this.state;
    this.setState({ pageNum }, () => { this.queryModelList() });
  }

  // 子列表
  expandedRowRender(record, index, indent, expanded) {
    const _this = this;
    const { versionList, algorithmId, anotherAlgorithmId } = _this.state;
    const columns = [
      { title: '版本', dataIndex: 'versionName', width: 120, key: 'versionName' },
      { title: '新增时间', dataIndex: 'createTimeShort', width: 200, },
      {
        title: '标注数据集', dataIndex: 'versionDataSetCount', width: 200,
        render: (text, data) => data.modelType !==6?<a type="link"
                                   onClick={this.onShowFilesModel.bind(this, true, record.modelId, data.versionId, true, record.modelType)}>{text}</a> : <a>0</a>,
      },
      {
        title: '内置数据集', dataIndex: 'versionBuildInDataSetCount', width: 200,
        render: (text, data) => {
          return data.useBuildInDataSet ? data.modelType !==6? <a type="link" onClick={this.showInsertData.bind(this, true, true, record.modelId, data.versionId)}>{text}</a> : data.extraData : <Text style={{ color: '#a7a3a3' }}>禁用</Text>
        }
      },
      {
        title: '状态',
        dataIndex: 'versionStatus',
        width: 100,
        key: 'versionStatus',
        render: record => {
          switch (record) {
            case -1:
            case -2:
            case -3:
              return <Badge status="error" text="训练异常" />
              break;
            case 0:
              return <Badge color="#1890FF" text="训练完成" />
              break;
            case 1:
              return <Badge color="#52c41a" text="已发布" />
              break;
            case 2:
              return <Badge color="#FF9800" text="训练中" />
              break;
            // default:
            //     return <Badge color={'#FF9800'} text='发布中' />
          }
        },
      },
      {
        title: <>模型性能&nbsp;&nbsp;<Popover content={contents} title={<h4>模型性能</h4>}>
          <QuestionCircleOutlined style={{ color: '#8795A1' }} />
        </Popover></>,
        dataIndex: 'modelStatistic',
        key: 'modelStatistic',
        render: (text, data) => {
          const entityDatas = (data.anotherModelStatistic && JSON.parse(data.anotherModelStatistic)) || [];
          const datas = (data.modelStatistic && JSON.parse(data.modelStatistic)) || [];
          let entityObj = {};
          let obj = {};
          entityDatas.map((item, i) => {
            if (item.key == '整体') { entityObj = item; }
          });
          datas.map((item, i) => {
            if (item.key == '整体') { obj = item; }
          });
          if (data.modelType === 6){
            return datas.length > 0 && datas[0]['hit@10'] ? <span>
                  hit@10：{String(datas[0]['hit@10']).slice(0, 4)}
                </span> : "--"
          }
          if (entityObj.key || obj.key) {
            return <>
              {entityObj.key ? <span>
                                {(record.modelType === 1 || record.modelType === 4 || record.modelType === 5) && <strong>{record.modelType === 5 ? '实体： ' : '实体: '}</strong>}
                准确率：<span style={{ paddingRight: '8px' }}>{String(entityObj.precision).slice(0, 4) || '--'}</span>
                                    召回率：<span style={{ paddingRight: '8px' }}>{String(entityObj.recall).slice(0, 4) || '--'}</span>
                                    F1： <span style={{ paddingRight: '8px' }}>{String(entityObj.F1).slice(0, 4) || '--'}</span>
                            </span> : ''}
              {obj.key ? <span>
                                {(record.modelType === 1 || record.modelType === 4 || record.modelType === 5) && <strong>{record.modelType === 1 ? '关系： ' : (record.modelType === 4 ? '属性: ' : '事件: ')}</strong>}
                准确率：<span style={{ paddingRight: '8px' }}>{String(obj.precision).slice(0, 4) || '--'}</span>
                                    召回率：<span style={{ paddingRight: '8px' }}>{String(obj.recall).slice(0, 4) || '--'}</span>
                                    F1： <span style={{ paddingRight: '8px' }}>{String(obj.F1).slice(0, 4) || '--'}</span>
                            </span> : ''}
            </>
          }
          return '--'
        },
      },
      {
        title: '操作',
        key: 'operation',
        width: 200,
        render: (_, data) => (
          <>
            {/* <a type="link" onClick={this.view.bind(this, true, data.versionId)}>查看</a> */}
            <NavLink type="link" to={`/algorithm/modelTest/${record.modelType}/${data.versionId}?algorithmId=${record.algorithmId}&&anotherAlgorithmId=${record.anotherAlgorithmId}`}>查看</NavLink>
            {!window.isHidePublishButton && data.versionStatus === 0 && <a type="link" onClick={this.onEditVersion.bind(this, data.versionId, 1, data.modelId)}>发布</a>}
            {!window.isHidePublishButton && data.versionStatus === 1 && <Popconfirm
              title="确定下线?"
              okText="确定"
              cancelText="取消"
              onConfirm={this.onEditVersion.bind(this, data.versionId, 0, data.modelId)}
            >
              <a type="link">下线</a>
            </Popconfirm>}
            {data.versionStatus !== 1 && data.versionStatus !== 2 && <Popconfirm
              title="确定删除?"
              okText="确定"
              cancelText="取消"
              onConfirm={this.onDeleteVersion.bind(this, data.versionId, data.modelId)}
            >
              <a type="link">删除</a>
            </Popconfirm>}
          </>
        ),
      },
    ];

    return (
      <div style={{ padding: 8 }}>
        <Table columns={columns} size="small" dataSource={versionList[record.modelId]} rowKey={record => record.versionId} bordered pagination={{
          simple: true,
          size: 'small',
          pageSize: 5,
          itemRender: (current, type, originalElement) => {
            if (type === 'prev') {
              return <LeftCircleOutlined title="上一页" />;
            }
            if (type === 'next') {
              return <RightCircleOutlined title="下一页" />;
            }
            return originalElement
          },
        }} />
      </div>
    );
  }

  // 添加标注数据集弹框
  addDataSet(addDataSetVisible) {
    this.setState({ addDataSetVisible });
  }

  // 删除标注数据集
  deleteMarkedData(dataSetId, segmentNum) {
    const { selected, modelId } = this.state;
    if (selected - segmentNum < 4) {
      notification['error']({
        message: '数据集删除识失败',
        key: '数据集删除识失败',
        description: '至少包含4篇文档训练,删除失败',
      });
      return;
    } else {
      deleteMarkedDataSet(dataSetId, modelId).then(res => {
        if (res.retCode === '0') {
          this.getMarkedDataset(modelId, '', '', segmentNum);
        }
      })
    }
  }

  //  搜索标注数据集列表
  onSearchMarkedList(dataSetName) {
    const { modelId, versionId, isVersion } = this.state;
    this.setState({ dataSetName, pageNum: 1 }, () => this.getMarkedDataset(modelId, versionId, isVersion));
  }

  // 标注数据集弹框 标签内容
  labelContent(text, record) {
    let arrayLabelFromName = []
    let labelObject = {}
    record.relationLabelVOList && record.relationLabelVOList.map(item => {
      if (arrayLabelFromName.indexOf(item.labelFromName) !== -1) {
        labelObject[item.labelFromName] = labelObject[item.labelFromName] + '/' + item.labelToName
      } else {
        labelObject[item.labelFromName] = item.labelToName
        arrayLabelFromName.push(item.labelFromName)
      }
    })
    let content = <div style={{ maxWidth: 400, maxHeight: 200, overflow: 'auto' }}>
      {record.purpose !== 5 && <><div style={bondStyle}> 实体标签:</div>
        <div>
          {
            record.objectLabelVOList && record.objectLabelVOList.filter(val => val.labelType === 0).map((item, index) => <Tag style={{ marginTop: 8 }}>{item.labelName}</Tag>)
          }
        </div></>
      }
      {record.purpose === 1 && <><div style={bondStyle}> 关系：</div>
        <div>
          {
            record.relationLabelVOList && record.relationLabelVOList.map(item => <div style={{ marginTop: 8 }}>{`${item.labelRelationName} : ${item.labelFromName} ->${item.labelToName}`} </div>)
          }
        </div></>}
      {record.purpose === 4 && <><div style={bondStyle}> 属性标签:</div>
        <div>
          {
            record.objectLabelVOList && record.objectLabelVOList.filter(val => val.labelType === 1).map((item, index) => <Tag style={{ marginTop: 8 }}>{item.labelName}</Tag>)
          }
        </div>
        <div style={bondStyle}> 实体属性:</div>
        <div>
          {
            record.relationLabelVOList && record.relationLabelVOList.map(item => <div style={{ marginTop: 8 }}>{`${item.labelRelationName} : ${item.labelFromName} ->${item.labelToName}`} </div>)
          }
        </div></>
      }
      {record.purpose === 5 && <>
        <div style={bondStyle}> 事件类型标签:</div>
        <div>
          {
            record.objectLabelVOList && record.objectLabelVOList.filter(val => val.labelType === 0).map((item, index) => <Tag style={{ marginTop: 8 }}>{item.labelName}</Tag>)
          }
        </div>
        <div style={bondStyle}> 实体类型标签:</div>
        <div>
          {
            record.objectLabelVOList && record.objectLabelVOList.filter(val => val.labelType === 1).map((item, index) => <Tag style={{ marginTop: 8 }}>{item.labelName}</Tag>)
          }
        </div>
        <div style={bondStyle}> 角色映射:</div>
        <div>
          {
            record.relationLabelVOList && record.relationLabelVOList.map(item => <div style={{ marginTop: 8 }}>{`${item.labelRelationName} : ${item.labelFromName} ->${item.labelToName}`} </div>)
          }
        </div>
      </>
      }

    </div>
    return record.purpose === 3 ? 1 :
      <Popover content={content}><span style={{ color: '#52c41a' }}>{record.purpose === 3 ? 1 : record.objectLabelVOList.length}</span></Popover>;
  }

  // 打开内置数据集弹框
  showInsertData(insertDataSetVisible, isVersion, modelId, versionId, insertData) {
    this.setState({ insertDataSetVisible, isVersion, modelId, versionId, insertData });
    !insertDataSetVisible && this.queryModelList();
  }

  render() {
    const { isShowAddDataModel, isShowViewModel, isShowAddVersonModel, isShowFilesModel, expandedRowKey, selected, isVersion, insertDataSetVisible, MarkedDatasetList,
      modelId, type, files, algorithmId, versionId, isLoading, modelList, modelTypeList, total, pageNum, keyword, modelType, addDataSetVisible, anotherAlgorithmId, insertData } = this.state;
    const columns = [
      { title: '模型名称', dataIndex: 'modelName', width: 360, key: 'modelName' },
      {
        title: <>标注数据集&nbsp;&nbsp;<Popover content={'来源于数据中心的标注数据'} title={<h4>标注数据集</h4>}>
          <QuestionCircleOutlined style={{ color: '#8795A1' }} />
        </Popover></>,
        key: 'modelDataSetCount',
        width: 120,
        render: (text, record) => record.modelType !==6 ? <a type="link" onClick={this.onShowFilesModel.bind(this, true, record.modelId, '', false, record.modelType)}>{record.modelDataSetCount}</a> : <a>0</a>,
      },
      {
        title: <>内置数据集&nbsp;&nbsp;<Popover content={'支持通过接口上传或者手动上传符合内容规范的json文件作为内置数据集用于模型训练。'} title={<h4>内置数据集</h4>}>
          <QuestionCircleOutlined style={{ color: '#8795A1' }} />
        </Popover></>,
        key: 'modelBuildInDataSetCount',
        width: 120,
        render: (text, record) => record.modelType !==6 ? <a type="link" onClick={this.showInsertData.bind(this, true, false, record.modelId, '', record.modelBuildInDataSetCount)}>{record.modelBuildInDataSetCount}</a> : record.extraData,
      },
      {
        title: '模型类型',
        dataIndex: 'modelType',
        key: 'modelType',
        width: 120,
        filters: modelTypeList.map((modelType, index) => ({
          text: modelType.name,
          value: index,
        })),
        onFilter: (value, record) => (`${Number(record.modelType)}`).indexOf(value) !== -1,
        render: record => <Badge count={modelTypeList[record - 0].name} style={{
          backgroundColor: `rgba(${modelTypeList[record - 0].color}, .1)`,
          color: `rgba(${modelTypeList[record - 0].color}, 1)`,
          border: `1px solid rgba(${modelTypeList[record - 0].color}, .45)`,
          borderRadius: 2,
          height: 24,
          lineHeight: '20px',
        }} />,
      },
      {
        title: '状态',
        dataIndex: 'modelStatus',
        width: 120,
        key: 'modelStatus',
        filters: [{ text: '未发布', value: 0 }, { text: '已发布', value: 1 }],
        onFilter: (value, record) => (`${Number(record.modelStatus)}`).indexOf(value) != -1,
        render: record => (record - 0 ? <Badge status="success" text="已发布" /> : <Badge status="default" text="未发布" />),
      },
      {
        title: <>模型性能&nbsp;&nbsp;<Popover content={contents} title={<h4>模型性能</h4>}>
          <QuestionCircleOutlined style={{ color: '#8795A1' }} />
        </Popover></>,
        dataIndex: 'modelStatistic',
        key: 'modelStatistic',
        render: (text, record) => {
          const entityDatas = (record.anotherModelStatistic && JSON.parse(record.anotherModelStatistic)) || [];
          const datas = (record.modelStatistic && JSON.parse(record.modelStatistic)) || [];
          let entityObj = {};
          let obj = {};
          entityDatas.length > 0 && entityDatas.map((item, i) => {
            if (item.key == '整体') { entityObj = item; }
          });
          datas.length > 0 && datas.map((item, i) => {
            if (item.key == '整体') { obj = item; }
          });
          if (record.modelType === 6){
            return datas.length > 0 && datas[0]['hit@10'] ? <span>
                  hit@10：{String(datas[0]['hit@10']).slice(0, 4)}
                </span> : "--"
          }
          if (entityObj.key || obj.key) {
            return <>
              {entityObj.key ? <span>
                                {(record.modelType === 1 || record.modelType === 4) && <strong>实体：</strong>}
                {(record.modelType === 5) && <strong>实体：</strong>}
                准确率：<span style={{ paddingRight: '8px' }}>{String(entityObj.precision).slice(0, 4) || '--'}</span>
                                    召回率：<span style={{ paddingRight: '8px' }}>{String(entityObj.recall).slice(0, 4) || '--'}</span>
                                    F1： <span style={{ paddingRight: '8px' }}>{String(entityObj.F1).slice(0, 4) || '--'}</span>
                            </span> : ''}
              {obj.key ? <span>
                                {(record.modelType === 1 || record.modelType === 4) && <strong>{record.modelType === 1 ? '关系： ' : '属性: '}</strong>}
                {(record.modelType === 5) && <strong>事件：</strong>}
                准确率：<span style={{ paddingRight: '8px' }}>{String(obj.precision).slice(0, 4) || '--'}</span>
                                    召回率：<span style={{ paddingRight: '8px' }}>{String(obj.recall).slice(0, 4) || '--'}</span>
                                    F1： <span style={{ paddingRight: '8px' }}>{String(obj.F1).slice(0, 4) || '--'}</span>
                            </span> : ''}
            </>
          }
          return '--'
        },
      },
      { title: '添加时间', dataIndex: 'createTimeShort', width: 160, key: 'createTimeShortShort' },
      {
        title: '操作',
        key: 'actions',
        width: 160,
        render: record => <span>
                    <a type="link" onClick={this.addVerson.bind(this, true, record.modelId, record.algorithmId, record.anotherAlgorithmId, record.modelType)}>新增版本</a>
                    <Popconfirm
                      title="确定删除?"
                      okText="确定"
                      cancelText="取消"
                      onConfirm={this.delete.bind(this, record.modelId)}
                    >
                        <a type="link">删除</a>
                    </Popconfirm>
                </span>,
      },
    ];

    const MarkedColumns = [
      { title: '名称', dataIndex: 'dataSetName', key: 'dataSetName' },
      {
        title: '数据用途', dataIndex: 'purpose', key: 'purpose',
        render: record => <span>{modelTypeList[record - 0].name}</span>
      },
      {
        title: '标签', dataIndex: 'objectLabelVOList', key: 'objectLabelVOList',
        render: (text, record) => this.labelContent(text, record),
      },
      { title: '创建时间', dataIndex: 'createTimeShort', key: 'createTimeShort' },

    ];
    const operation = {
      title: '操作',
      render: record => <span>
                <Popconfirm
                  title="你确定删除数据集吗?"
                  okText="确定"
                  cancelText="取消"
                  onConfirm={this.deleteMarkedData.bind(this, record.dataSetId, record.segmentNum)}
                >
                    <a type="link">删除</a>
                </Popconfirm>
            </span>,
    };
    !isVersion && MarkedColumns.push(operation);
    return (
      <>
        {isLoading ? <div className="Spin"><Spin tip="数据加载中..." /></div> :
          <>
            {(keyword || modelList.length) ?
              <div style={{ padding: '8px 24px 24px' }}>
                <div style={{ marginBottom: 16 }}>
                  <Button type="primary" onClick={this.addData.bind(this, true, '')} style={{ marginRight: 12 }} >+新建模型</Button>
                  <Search placeholder="模型名称" onSearch={value => this.onSearch(value)} style={{ width: 200 }} />
                </div>
                <Table
                  bordered={false}
                  size="middle"
                  columns={columns}
                  dataSource={modelList}
                  onExpand={(expanded, record) => { this.onExpand(expanded, record.modelId) }}
                  expandedRowRender={this.expandedRowRender.bind(this)}
                  defaultExpandedRowKeys={expandedRowKey || '0'}
                  rowKey={record => record.modelId}
                  pagination={{ total, current: pageNum, onChange: this.onPageChange.bind(this) }}
                />
              </div>
              : <NoData title="您还没建立实体抽取模型" dec="建立模型，需要至少在数据中心标注过的4篇文档" btn="任务" callBack={this.addData.bind(this, true, '')} />
            }
          </>}
        {/* 版本查看弹框 */}
        {isShowViewModel && <View isShowViewModel={isShowViewModel} versionId={versionId} modelType={modelType} callBack={this.view.bind(this, false, '')} />}
        {/* 添加版本弹框 */}
        {isShowAddVersonModel && <AddVerson isShowAddVersonModel={isShowAddVersonModel} algorithmId={algorithmId}
                                            anotherAlgorithmId={anotherAlgorithmId} modelId={modelId} type={type} callBack={this.addVerson.bind(this, false, modelId, algorithmId)} />}
        {/* 新建模型弹框 */}
        {isShowAddDataModel && <AddModel isShowAddDataModel={isShowAddDataModel} modelId={modelId} callBack={this.addData.bind(this, false, modelId)} />}
        {/* 选择数据集弹框 */}
        {addDataSetVisible && <SelectDataSet visible={addDataSetVisible} modelId={modelId} parent={this} modelType={modelType} />}
        {/* 内置数据集 */}
        {insertDataSetVisible && <InsertDataSet visible={insertDataSetVisible} modelId={modelId} parent={this} isVersion={isVersion} versionId={versionId} insertData={insertData} />}
        {/* 标注数据集弹框 */}
        <Modal title="标注数据集" destroyOnClose visible={isShowFilesModel} onCancel={this.onShowFilesModel.bind(this, false, '', '', '', null)} width={'50%'} footer={null}
        >
          <div style={{ marginBottom: 16 }}>
            {!isVersion && <Button type="primary" onClick={this.addDataSet.bind(this, true)} style={{ marginRight: 12 }} >+添加</Button>}
            <Search placeholder="数据集名称" onSearch={value => this.onSearchMarkedList(value)} style={{ width: 200 }} />
          </div>
          <Table size="small" dataSource={MarkedDatasetList}
                 rowKey={record => record.dataSetId}
                 columns={MarkedColumns}
                 pagination={{ pageSize: 5 }}
          />
          {!isVersion ? [
            <div key="selected" style={{ color: 'rgba(135, 149, 161, 1)', position: "absolute", bottom: 37, left: 30, zIndex: 9999 }}>至少包含4篇文档训练，目前共包含{selected}篇 </div>,
          ] : null}
        </Modal>
      </>
    );
  }
}

export default ModelCenter
